<template>
    <div>
    <!-- 头部组件 -->
    <tmsHeader :tmsheader="tmsheader"></tmsHeader>

    <!-- 预付运费 -->
      <div class="dingDanTitle">
      <el-col :span="8">订单号<b style="color:red">*</b>---<span>12345678</span></el-col>
      <el-col :span="8">合同编号号---<span>12345678</span></el-col>
      <el-col :span="8">运输编号---<span>12345678</span></el-col>
    </div>
    <!-- 数据渲染 -->
    <div  v-for="(item,index) in tmsPayTabaData" :key="index">
    <el-row class="title">{{item.titleName}}</el-row>
        <div class="overflowTables">
          <el-table  border  tooltip-effect="dark" >
            <el-table-column  v-for="(itemcolumn,indexC) in item.tableColumn" :key="indexC" prop="" :label="itemcolumn" align="center" width=150>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 运算表格 复杂表格 -->
        <el-row class="title">货物信息</el-row>
        <el-table
    :data="tableData"
    border
    show-summary
    sum-text="总计"
    style="width: 100%">
    <el-table-column prop="id"
      label="货名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="规格型号">
    </el-table-column>
    <el-table-column
      prop="name"
      label="总包装">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="总数量"
      width="150">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="总重量kg"
      width="150">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="总体积m³"
      width="150">
    </el-table-column>
  </el-table>

        <!-- 订单备注 -->
        <el-row class="ddRemarks">这个是订单备注</el-row>

        <!-- 系统报价 -->
        <el-row class="title">系统报价</el-row>
        <el-table  border style="width: 100%">
              <el-table-column
      prop="name"
      label="单价（含税）"
      width="150">
    </el-table-column>
      <el-table-column
      prop="name"
      label="总里程（km）"
      width="150">
    </el-table-column>
      <el-table-column
      prop="name"
      label="运输费用（￥）"
      width="150">
    </el-table-column>
      <el-table-column
      prop="name"
      label="其他费用（￥）"
      width="150">
    </el-table-column>
      <el-table-column
      prop="name"
      label="费用总计（￥）"
      width="150">
    </el-table-column>
        </el-table>

       <!-- 价格调整 -->         
      <el-row class="title">价格调整</el-row>
    <el-table  border style="width: 100%">
    <el-table-column
      prop="name"
      label="单价（含税）"
      width="150px">
    </el-table-column>
      <el-table-column
      prop="name"
      label="总里程（km）"
      width="150">
    </el-table-column>
      <el-table-column
      prop="name"
      label="运输费用（￥）"
      width="150">
    </el-table-column>
      <el-table-column
      prop="name"
      label="其他费用（￥）"
      width="150">
    </el-table-column>
        <el-table-column
      prop="name"
      label="额外费用（￥）"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="费用总计（￥）"
      width="150">
    </el-table-column>
        <el-table-column
      prop="name"
      label="备注"
      width="150">
    </el-table-column>
        </el-table>
        


    <!-- 审批备注 -->
        <el-row class="title">审批备注</el-row>
        <el-input class="bzinput" type="textarea" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input> 
        <el-col class="btngroup">
              <el-button type="success" round>审批通过</el-button>
              <el-button type="warning" round>驳回</el-button>
              <el-button type="info" @click="returnTo()" round>返回上级</el-button>

              


              
        </el-col>
  </div>
</template>

<script>
 import tmsHeader from '../../TmsHeader';
  export default {
  name: "Settlement",
  data() {
    return {
      //头部组件的参数
      tmsheader: {
          tmsBigTitle: "承运商",
        tmsATitle: "结算管理",
        tmsBTitle: "应收款-审批价格",
      },
      //额外费用
      ewPrice:'',
          
      
      //表格静态数据
      tmsPayTabaData: [
        {
          titleName: "客户信息",
          tableColumn: {
            yhm: "用户名",
            gsm: "公司名",
            lxr: "联系人",
            lxTel: "联系电话"
          },
        },
          {
          titleName: "委托人信息",
              tableColumn: {
            wtf: "委托方",
            wtr: "委托人",
            wtlxdh: "委托人电话",
            thdz: "提货地址",
            thlxr: "提货联系人",
            thxldh: "提货人电话"
          }
        },
            {
          titleName: "收货人信息",
          tableColumn: {
            shf: "收货方",
            shr: "收货人",
            shTel: "收货电话",
            shdz: "收货地址"
          }
            },
          {
            
          titleName: "计划时间",
          tableColumn: {
            zhTime: "计划装货时间",
            dhTime: "计划到货时间"
          }
        }
      ],
      //表格动态数据
      tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }],
      //备注文本域的数据
      textarea:"",

      //上传附件的属性
      dialogImageUrl: '',
      dialogVisible: false,
      

    };
  },
  components: {
    tmsHeader,
  },

  methods: {
      returnTo(){
        this.$router.push('/carrier/settlement/receivables')
      },
      /* 上传附件事件 */
        handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },
  };
</script>
<style scoped lang="less">
.dingDanTitle{
    width: 70%;
    margin-top: 30px;
    border-bottom: 3px dotted ;
    padding-bottom: 30px;
    .el-col{
      font-weight: 600;
      span{
        color: red;
        padding-left:10px;
        font-style:italic
      }
    }
    }
    .ddRemarks{
      border-left: 5px solid red;
      text-align: left;
      padding-left: 25px;
      font-weight: 600;
      margin-top: 30px;
    }
    .overflowTables{
    overflow: auto;

    }
    .btngroup{
      display: flex;
      justify-content: center;
      margin-top: 50px;
      padding-bottom: 20px;
    }
    /deep/ .el-upload{
    float: left;

    }
    .ewPrice{
      padding:10px 0px;
      display: flex;
      align-items: center;
      .el-col:first-child{
        border-left: 5px solid red;
        padding-left: 10px;
        color: red;

      }
    }
    .bzinput{
      width: 50%;
      float: left;
    }
    .el-table {
    display: table-cell;
    }
    .title {
    width: 15%;
    border-top: 2px solid #f56c6c;
    font-weight: 600;
    font: 30px;
    padding:10px 0px;
    margin-top: 30px;
    }
</style>